<template>
	<view class="learn_wrapper">
		<view class="header">
			<view class="avatar">
				<img :src="userInfo.avatar" alt="user avatar" v-if="Object.keys(userInfo).length > 0" />
				<img :src="errorAvatar" v-else />				
				<text class="nickname">{{userInfo.nickname}}</text>
			</view>			
		</view>
		<Tabs :sendData="tabConfig" @changeTabs="changeTabs" />
		<view class="learn_statistics" v-if="tabConfig.index > 0">
			<view class="title"><i class="iconfont icon-shijian_o"></i>累计数据</view>
			<view class="learn_total">
				<view class="name">累计学习课程</view>
				<view class="account"><text class="num">{{total}}</text>课</view>
			</view>
		</view>
		<view class="learn_recording" v-else>
			<view class="learn_list" v-if="tabsList.length > 0">
				<view class="learn_item" v-for="item in tabsList" :key="item.id" @click="GotoLearnDetail(item.id)">
					<view class="picture">
						<img :src="item.cover" alt="" @error="tabErrorPicture(item.id)" />
					</view>
					<view class="learn_intro">
						<view>
							<view class="title">{{ item.title }}</view>
							<view class="msg">{{ item.description }}</view>
						</view>
						<view>
							<view class="tip">最后一次学习时间</view>
							<view class="time">{{ item.update_time }}</view>
						</view>						
					</view>
				</view> 
				<view class="noMore">没有更多数据了哦~~</view>
			</view>
			<view class="noData" v-else>
				<i class="iconfont icon-zanwushuju"></i>
				<text class="name">暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as type from '../../utils/device'
	import { api_getUserInfo,api_getLearnRecordingList } from '@/api/api'
	import Tabs from '@/components/custom_tabs/index.vue'
	export default {
		components: { Tabs },
		data() {
			return {
				userInfo: {},
				tabConfig: {
					index: 0,
					activeColor: '#333',
					activeBorderColor: '#f00',
					list: ['学习记录','学习统计'],
				},
				tabsList: [],
				total: 0,
				errorAvatar: require('@/static/img/avatar.png'),
				errorProduct: require('@/static/img/default_image.jpg'), 
			}
		},
		computed: {
			device(){
				return type.default;
			}
		},
		onLoad(options) {
			this.init(options);
		},
		created(){

		},
		methods: {
			init(opt){	// 初始化
				this.tabConfig.index = opt.subIndex;
				uni.showLoading({ title: '数据加载中...' });
				api_getUserInfo().then(res => {
					let { code,data,msg } = res;
					uni.hideLoading();
					if (code == 1) {
						this.userInfo = data;
						this.getLearnRecording();
					} else {
						uni.showToast({ title: msg,icon: 'error' });
					}
				}).catch(err => {
					uni.hideLoading();
					console.log(err);
				});
			},
			getLearnRecording(){	// 获取学习记录列表
				api_getLearnRecordingList().then(res => {
					let { code,data: {list,total},msg } = res;
					if (code == 1) {
						this.tabsList = list;
						this.total = total;
					} else {
						uni.showToast({ title: msg,icon: 'error' });
					}
				}).catch(err => {
					console.log(err);
				})
			},
			tabErrorPicture(id){	// 学习记录列表图片加载失败
				let i = this.tabsList.findIndex(v => v.id == id);
				this.tabsList[i].cover = this.errorProduct;		
			},
			changeTabs(i){	// 面包屑导航接收值
				const pages = getCurrentPages();
				const currentRoute = this.device == 'MP-WEIXIN' ? '/'+pages[pages.length - 1].route : pages[pages.length - 1].$route.path;
				uni.redirectTo({ url: `${currentRoute}?subIndex=${i}` });	
			},
			GotoLearnDetail(id){	// 学习记录item项
				console.log('goto detail',id);
				uni.navigateTo({ url: `/pages/product/index?id=${id}` });
			},
			nanoid(len = 6) {  // 生成随机数
			    if (len <= 11) {
			        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')   
			    } else {
			        return this.nanoid(11) + this.nanoid(len - 11)   
			    }    
			}
		}
	}
</script>

<style lang="scss" scoped>
.learn_wrapper{
	padding: 0 0 20px;
	box-sizing: border-box;
	.header{
		display: flex;
		justify-content: space-between;
		padding: 20px;
		background-color: #333;
		.avatar{
			font-size: 15px;
			color: #fff;
			img{
				width: 60px;
				height: auto;
				border-radius: 50%;
			}
			.nickname{
				vertical-align: top;
				margin: 10px 0 0 10px;
			}
		}
	}
	.learn_statistics{
		padding: 10px 20px;
		box-sizing: border-box;
		.title{
			display: flex;
			align-items: center;
			font-size: 14px;
			margin: 0 0 20px 0;
			.iconfont{
				font-weight: 700;
				color: #1e90ff;
			}
		}
		.learn_total{			
			width: 150px;
			height: 60px;
			box-sizing: border-box;
			border-radius: 5px;
			background-color: #eee;
			padding: 5px 10px;
			display: flex;    
			flex-direction: column;
			-webkit-box-orient: vertical;
			justify-content: space-around;
			.name{
				font-size: 10px;
				color: #8f8e8e;
			}
			.account{
				font-size: 10px;
				color: #8f8e8e;
				.num{
					margin: 0 5px 0 0;
					font-size: 20px;
					color: #333;
				}
			}
		}
	}
	.learn_recording{
		.learn_list{
			.learn_item{
				display: flex;
				padding: 10px 10px 10px 15px;
				box-sizing: border-box;
				background-color: #fafafa;
				margin: 0 0 10px 0;
				.picture{
					width: 80px;
					height: 80px;
					overflow: hidden;
					img{
						display: block;
						width: 80px;
						height: 80px;
						margin: 0;
					}
				}
				.learn_intro{
					padding: 0 0 0 10px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title{
						font-size: 12px;						
					}
					.msg{
						font-size: 12px;
						padding: 0 0 5px 0;
					}
					.tip{
						font-size: 12px;
						margin: 5px 0;
					}
					.time{
						font-size: 12px;
					}
				}
			}
			.noMore{
				font-size: 14px;
				text-align: center;
				color: #ccc;
				margin: 20px 0 0;
			}
		}
		.noData{
			margin: 50px auto 0;
			text-align: center;
			.iconfont{
				display: block;
				margin: 0 auto;
				font-size: 100px;
				color: gray;
			}
			.name{
				font-size: 14px;
				color: #999;
			}
		}
	}
}
</style>
